<template>
  <div class="container">
    <index-head></index-head>
    <div class="collecting_table">
      <div class="collectionSearchBox">
        <input type="text" v-model="title"  class="collection-search" placeholder="请输入名称" @keyup.enter="getList">
        <img src="../assets/image/search_icon.png" class="collection-search-pic" @click="getList">
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column prop="titile" label="名称" width="610">
        </el-table-column>
        <el-table-column prop="createTime" label="收藏日期">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="handleCheck(scope.row)">查看</el-button>
            |
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      <turn-page></turn-page>-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                     :page-sizes="[20, 40, 60, 80]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!--    <com-foot></com-foot>-->
  </div>
</template>

<script>
  import indexHead from '../components/head'
  import _ from 'lodash'
  // import turnPage from '../components/turnPage'
  // import comFoot from '../components/comfoot'
  export default {
    data() {
      return {
        page: 1,
        limit: 20,
        total: 0,
        token: localStorage.getItem('TOKEN_KEY'),
        title:'',
        tableData: [],
      }

    },
    components: {
      // comFoot,
      indexHead,
      // turnPage
    },

    methods: {
      handleSizeChange(val) {
        this.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getList()
      },
      handleCheck(row) { // todo
        let {indexCode,regionCode,timeCode,templateName} = row
        localStorage.setItem('macroCodes',JSON.stringify({indexCode,regionCode,timeCode}))
        this.$router.push({path: '/macro4', query: {tablename: templateName,pageType:'changeParam'}})
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios
            .request({
              url: `5200/sysannouncement/delete/${row.id}`,
              method: "delete",
              params:{
                access_token:this.token
              }
            })
            .then(res => {
              if (String(res.data.resp_code) === '1') {  // 失败
                this.$message.error( res.data.resp_msg);
                return
              }
              this.$message.success('删除成功!');
              this.getList()
            })
        })
      },
      getList() {
        this.$axios
          .request({
            url: "5200/sysannouncement/list",
            method: "post",
            params: {
              access_token:this.token,
              titile:this.title
            },
            data:{
              page: this.page,
              limit: this.limit,
            }
          })
          .then(res => {
            this.tableData = Object.assign([], _.get(res,'data.data',[]))
            this.total = _.get(res,'data.count',0)
          })
      },
    },
    created() {
      this.getList()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .collecting_table {
    width: 1330px;
    margin: 30px auto 40px;
    text-align: center;
  }

  .el-button--small {
    padding: 0;
    background: none;
    border: none;
  }

  .el-button--small:hover {
    background: none;
  }

  .el-button--small:focus {
    background: none;
    color: #DB9A36;
  }

  .el-button {
    color: #DB9A36;
    margin-right: 10px;
  }

  .el-button--danger {
    color: #D35022;
  }

  .collectionSearchBox {
    text-align: left;
    margin-bottom: 30px;
  }

  .collection-search {
    width: 240px;
    height: 36px;
    padding-left: 10px;
  }

  .collection-search-pic {
    width: 20px;
    margin-left: 20px;
    cursor: pointer;
  }
</style>
